<template>
  <div id="axios" class="">

    <ul class="axiosList" v-for="(item, index) in axiosListData">
      <li>ID：<input type="text" v-model="item.id"></li>
      <li>姓名：<input type="text" v-model="item.name"></li>
      <li>性别：<input type="text" v-model="item.sex"></li>
      <li>爱好：<input type="text" v-model="item.hobby"></li>
    </ul>

    <ul class="axiosOperation">
      <li>姓名：<input type="text" v-model="postData.name"></li>
      <li>性别：<input type="text" v-model="postData.sex"></li>
      <li>年龄：<input type="text" v-model="postData.age"></li>
      <li>爱好：<input type="text" v-model="postData.hobby"></li>
    </ul>
    <div class="buttonTap">
      <button @click="_addData">添加</button>
    </div>

    <ul class="axiosOperation">
      <li>ID：<input type="text" v-model="delData.id"></li>
    </ul>
    <div class="buttonTap">
      <button @click="_delData">删除</button>
    </div>

    <ul class="axiosOperation">
      <li>ID：<input type="text" v-model="updata.id"></li>
      <li>姓名：<input type="text" v-model="updata.name"></li>
      <li>性别：<input type="text" v-model="updata.sex"></li>
    </ul>
    <div class="buttonTap">
      <button @click="_upData">更新</button>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'axios',
    data() {
      return {
        axiosListData: '',
        postData:{
          name: '',
          sex: '',
          age: '',
          hobby: ''
        },
        delData: {
          id: ''
        },
        updata: {
          id: '',
          name:'',
          sex:''
        }
      }
    },
    mounted() {
      this._getData();
    },
    methods: {
      //获取数据
      _getData(){
        let _this = this;
        this.axios.get('/api/get').then(function(res){
          console.log(res.data);
          _this.axiosListData = res.data;
        }).catch(function (error) {
          console.log(error);
        });
      },

      //添加数据
      _addData(){
        let _this = this;
        this.axios.post('/api/add',_this.postData).then(function(res){
          console.log(res);
          _this._getData();
        }).catch(function (error) {
          console.log(error);
        });
      },

      //删除数据
      _delData(){
        let _this = this;
        this.axios({
          method: 'delete',
          url: '/api/del',
          data: _this.delData
        }).then(function(res){
          console.log(res);
          _this._getData();
        }).catch(function (error) {
          console.log(error);
        });
      },

      //更新数据
      _upData(){
        let _this = this;
        this.axios({
          method: 'put',
          url: '/api/updata',
          data: _this.updata
        }).then(function(res){
          console.log(res);
          _this._getData();
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  }
</script>

<style lang="scss" scoped>

  .axiosList, .axiosOperation{
    display: flex;
    font-size: .12rem;
    text-align: center;
  }
  .axiosList li, .axiosOperation li{
    margin: .1rem 0;
  }
  .axiosList li input, .axiosOperation li input{
    width: 50%;
    border: .01rem solid #131313;
  }

  .axiosOperation{
    margin-top: .3rem;
  }

  .buttonTap{
    display: flex;
  }
  .buttonTap button{
    width: 30%;
    margin: .2rem 10% 0 10%;
    padding: .05rem 0;
    font-size: .18rem;
    background-color: #00ADED;
    color: #FFF;
  }

</style>
